<template>
	<!-- <view class="flex-row justify-between group_2">
		<image class="image_8"
			src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=0724664571e15e798ceaa8ece412c25f.png" />
		
	</view> -->

	<view class="flex-row justify-between group_2 " @click="onImageWrapperClick">
		<cover-view class="glow-effect">

			<cover-image class="image_8"
				src="https://wenxinyiyan-1300324331.cos.ap-shanghai.myqcloud.com/arrow-left.png" />
		</cover-view>

	</view>

	<view class="flex-col section">

		<image class="image_5 pos"
			src="https://wenxinyiyan-1300324331.cos.ap-shanghai.myqcloud.com/header-chat.png" />


	</view>

	<view v-if="isLoading" class="loading-container">
		<div class="loading-spinner">
			<div class="loading-dots"></div>
			<div class="loading-dots"></div>
			<div class="loading-dots"></div>
		</div>
	</view>

	<view class="cul-wrapper">
		<!--这里减掉的60为操作栏的高度和内边距之和-->
		<scroll-view :style="{height:scrollHeight-260+'px'}" scroll-y :scroll-into-view="scrollIndex"
			scroll-with-animation>
			<block v-for="(msg,index) in msgs" :key="index">
				<view :class="[msg.isme?'msg-me':'msg-service']" :id="'msg-'+index">
					<image class="avatar" v-if="!msg.isme" :src="anotherAvatar" lazy-load></image>
					<view class="msg-text">
						<view class="msg-text-content">
							<view>{{msg.data}}</view>
						</view>
					</view>
					<image class="avatar" v-if="msg.isme" :src="meAvatar" lazy-load></image>
				</view>
			</block>
		</scroll-view>


		<view class="operation">


			<input type="text" v-model="msgInput.msg1" class="msg-input1" placeholder="Type a message ..." />
			<button type="text" class="msg-input2" @tap="sub1(msgInput.msg1)" />

		</view>

		<!-- <view class="flex-row self-stretch group_5">
			<view class="flex-col justify-start items-start flex-1 relative text-wrapper_2">
				<text class="font text_2 text_5">Type a message ...</text>
			</view>
			<view class="flex-col justify-start items-center shrink-0 image-wrapper_2 ml-15">
				<image class="image_16"
					src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=8421bfab1ac1b4d3204e01c1a7693e68.png" />
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {

		name: 'CulChat',
		props: {
			//聊天窗体高度
			// scrollHeight: {
			// 	type: Number,
			// 	default () {
			// 		let height = 0
			// 		//调用uni-app接口获取屏幕高度
			// 		uni.getSystemInfo({
			// 			//成功回调函数
			// 			success(res) {
			// 				//windoHeight为窗口高度，主要使用的是这个
			// 				height = res.windowHeight
			// 			}
			// 		})
			// 		return height
			// 	}
			// },
			meAvatar: {
				type: String,
				default: '/static/头像-女.png'
			},
			anotherAvatar: {
				type: String,
				default: 'https://wenxinyiyan-1300324331.cos.ap-shanghai.myqcloud.com/ai-photo.png'
			}

		},
		data() {
			return {
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				//滚动位置
				scrollIndex: '',
				isLoading: false,
				scrollHeight: 0, // 将scrollHeight作为响应式数据
			}
		},
		methods: {
			//滚动到指定位置
			jumpScroll() {
				//滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
				this.scrollIndex = ''
				this.$nextTick(function() {
					this.scrollIndex = 'msg-' + (this.msgs.length - 1)
				})
			},
			onImageWrapperClick() {
				// 跳转到下一个页面，这里需要替换为您想要跳转的页面路径
				uni.navigateTo({
					url: '/pages/home/home' // 请替换为您的页面路径
				});
			},

			async sub1(val) {
				console.log("我提问啦" + val);
				if (!this.conversion) {
					this.sub(val);
				}
				if (!val || val.trim() === '') {
					return; // 如果val为空，则直接返回不执行后续操作
				}
				this.msgInput.msg1 = '';

				let aiMsg = {
					isme: true,
					data: val
				};
				this.msgs.push(aiMsg);
				console.log("提问：" + val);
				// 王晨，为什么要吃饭
				this.isLoading = true;



				try {
					const baseUrl = "https://wenxin.myearconsult.online";
					// const baseUrl = "http://127.0.0.1:8082";
					await uni.request({
						url: `${baseUrl}/chat`,
						method: "GET",
						data: {
							msg: val
						},
						success: (res) => {
							const response = res.data;
							if (response && response.result) {
								// 获取并处理result字段内容
								const resultText = response.result;
								console.log("AI回复：", resultText);
								// 在这里您可以将resultText显示到聊天界面或其他适当的地方
								// 例如：
								let aiMsg = {
									isme: false,
									data: resultText

								};
								this.msgs.push(aiMsg);

								this.isLoading = false;
								this.jumpScroll();
							} else {
								console.error('未能从服务器获取有效结果');
							}
						},
						fail: (err) => {
							console.error('请求失败：', err);
							this.isLoading = false;
						}
					});
				} catch (error) {
					console.error("获取AI回复时出错:", error);
					// 小猪佩奇比小几岁
				} finally {
					this.jumpScroll();
				}
			},




		},
		mounted() {
			setTimeout(() => {
				// 创建消息对象
				let aiMsg = {
					isme: false,
					data: 'Hello，有什么问题尽管问我'
				};

				// 延时后执行 push 操作
				this.msgs.push(aiMsg);
			}, 700); // 1000 毫秒 = 1 秒
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = res.windowHeight; // 更新scrollHeight的值
				}
			});
		},
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
		overflow: hidden;

	}

	.cul-wrapper {
		width: 100vw;
		padding: 0 35rpx;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.cul-wrapper .scroll-view {
		/* 针对 iOS 平台 */
		-webkit-overflow-scrolling: touch;
		overflow: hidden;
		/* 隐藏滚动条并禁用滚动 */
		-ms-overflow-style: none;
		/* IE和Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	/* 如果需要同时隐藏水平滚动条，可以添加以下规则 */
	.cul-wrapper .scroll-view::-webkit-scrollbar {
		display: none;
		/* 针对 Chrome, Safari 和 Opera */
		width: 0;
		/* 对于WebKit */

	}


	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.msg-text {
		max-width: 560rpx;
	}

	.msg-me>.msg-text {}

	.msg-text-content {
		line-height: 46rpx;
		/* 增加行距 */
		/* display: inline-block; */
		box-sizing: border-box;
		padding: 25rpx;
		font-size: 30rpx;
		/* 增加字体大小 */
		user-select: text;
		font-family: sans-serif;
		
	}

	.msg-me>.msg-text>.msg-text-content {
		margin-left: 70rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #d5e0e5;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 10rpx;
		margin-right: 15rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		color: #FFFFFF;
		margin-left: 15rpx;
		background-color: #2dcbd0;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 10rpx;
		margin-right: 70rpx;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		margin-bottom: 5%;
		align-items: center;
		background: #FFFFFF;
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}

	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		margin-right: 20rpx;
		background: #FFFFFF;
		height: 116rpx;
		width: 520rpx;
		border-radius: 10px;
		padding: 0 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
	}

	.uni-input-placeholder {
		color: #c1c1c1;
	}

	.messageY {
		flex-wrap: ;
	}

	.msg-input2 {
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 30px 30px;
		border: 1px #ffffff solid;
		padding: 32rpx 0;
		background-color: #2dcbd0;
		border-radius: 40rpx;
		/* box-shadow: 0rpx 8rpx 240rpx #a9a9a91a; */
		width: 116rpx;
		height: 116rpx;
	}

	/* 激活状态（点击时） */
	.msg-input2:active {
		background-color: #1075b3;
		/* 点击时的背景颜色 */
	}



	.loading-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		width: 100px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 10px;
	}

	.loading-spinner {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-dots {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #3498db;
		margin: 0 5px;
		animation: loading-dots 1s ease-in-out infinite;
	}

	.loading-dots:nth-child(2) {
		animation-delay: 0.2s;
	}

	.loading-dots:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes loading-dots {

		0%,
		100% {
			transform: scale(0);
			opacity: 0.5;
		}

		50% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.toppicture {
		left: 128.7px;
		top: 44.77px;
		width: 118.83px;
		height: 128.23px;
		opacity: 1;

	}

	.image_7 {
		width: 20rpx;
		height: 48rpx;
	}

	.pos_3 {
		position: absolute;
		right: 356.52rpx;
		top: 117.28rpx;
	}

	.section_3 {
		padding-bottom: 6rpx;
		background-image: url('https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=63cecd1f4966be7650bd5f36dd1d82d8.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 174rpx;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 161.38rpx;
		transform: translateX(-50%);
	}

	.image_10 {
		width: 132rpx;
		height: 164rpx;
	}

	.image_11 {
		width: 150rpx;
		height: 56rpx;
	}

	.pos_6 {
		position: absolute;
		left: 0;
		top: 21.44rpx;
	}

	.image_13 {
		width: 116rpx;
		height: 54rpx;
	}

	.pos_8 {
		position: absolute;
		left: 50%;
		top: 42.04rpx;
		transform: translateX(-50%);
	}

	.image_14 {
		width: 90rpx;
		height: 42rpx;
	}

	.pos_9 {
		position: absolute;
		right: 14.1rpx;
		bottom: 8.06rpx;
	}

	.image_5 {
		opacity: 0.25;
		filter: blur(140rpx);
		width: 236rpx;
		height: 256rpx;

	}

	.pos {
		position: absolute;
		left: 50%;
		bottom: 50.46rpx;
		transform: translateX(-50%);
	}

	.section {
		padding: 72rpx 0 144rpx;
		filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
		background-image: url('https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=85435f9b1673ec225a8017d48d78a61e.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_2 {

		position: fixed;
		/* 设置为固定定位 */
		top: 100rpx;
		/* 距离屏幕底部的距离，可以是像素或rpx */
		left: 45rpx;
		/* 距离屏幕右侧的距离，可以是像素或rpx */
		z-index: 1000;
		/* 确保在其他内容之上 */
		/* 		  
		margin-left: 42rpx;
		margin-right: 30rpx;
		margin-top: 70rpx; 
		padding: 40rpx 8rpx 0; */
	}

	.image_8 {
		width: 56rpx;
		height: 56rpx;

	}

	.glow-effect {
		box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.5);
	}

	.image_9 {
		margin-right: 12rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.page {
		background-color: #fafafa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		padding: 0 50rpx;
		overflow-y: auto;
	}

	.text-wrapper {
		padding: 34.36rpx 0 27.64rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 20rpx 160rpx #a9a9a91a;
		width: 374rpx;
	}

	.text {
		color: #323438;
		font-size: 32rpx;
		font-family: NunitoSans;
		line-height: 60.8rpx;
		width: 250rpx;
	}

	.group_4 {
		margin-top: 248rpx;
		padding-left: 84.92rpx;
		padding-right: 69.08rpx;
	}

	.image_15 {
		width: 96rpx;
		height: 96rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: NunitoSans;
		line-height: 54rpx;
	}

	.text_2 {
		width: 216rpx;
	}

	.text_3 {
		color: #323438;
		font-size: 40rpx;
		font-family: NunitoSans;
		font-weight: 700;
		line-height: 58rpx;
		text-align: center;
	}

	.text_4 {
		color: #32343899;
		text-align: center;
	}

	.group_5 {
		margin-top: 342.62rpx;
	}

	.text-wrapper_2 {
		padding: 33.48rpx 0 28.52rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		box-shadow: 0rpx 8rpx 240rpx #a9a9a91f;
		height: 116rpx;
	}

	.text_5 {
		margin-left: 40.34rpx;
		color: #a9a9a999;
	}

	.image-wrapper_2 {
		padding: 32rpx 0;
		background-color: #2dcbd0;
		border-radius: 40rpx;
		box-shadow: 0rpx 8rpx 240rpx #a9a9a91a;
		width: 116rpx;
		height: 116rpx;
	}

	.image_16 {
		width: 52rpx;
		height: 52rpx;
	}

	.section_2 {
		padding-bottom: 6rpx;
		background-image: url('https://ide.code.fun/api/image?token=65eaa51eeb5b5500113364bd&name=63cecd1f4966be7650bd5f36dd1d82d8.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 174rpx;
	}

	.pos_5 {
		position: absolute;
		left: 50%;
		top: 161.38rpx;
		transform: translateX(-50%);
	}

	.image_11 {
		width: 132rpx;
		height: 164rpx;
	}

	.image_12 {
		width: 150rpx;
		height: 56rpx;
	}

	.pos_6 {
		position: absolute;
		left: 0;
		top: 21.44rpx;
	}

	.image_14 {
		width: 116rpx;
		height: 54rpx;
	}

	.pos_8 {
		position: absolute;
		left: 50%;
		top: 42.04rpx;
		transform: translateX(-50%);
	}

	.image_15 {
		width: 90rpx;
		height: 42rpx;
	}

	.pos_9 {
		position: absolute;
		right: 14.1rpx;
		bottom: 8.06rpx;
	}
	
	
	
</style>